<template>


	<view class="wrap">
		<view class="wap pb100">

			<!-- <view class="title">
				<text>发起运动</text>
			</view> -->
			<view class="bg">
				<view class="group">
					<view class="lab">
						主题:
					</view>
					<view class="inp_box">
						<input v-model="reqData.Title" type="text" placeholder="请填写主题">
					</view>
				</view>
				<view class="group">
					<view class="lab">
						场地:
					</view>
					<view @click="openMap" class="inp_box flx ball_space">
						<input v-model="ShopName" type="text" disabled placeholder="请选择场地">
					</view>
					<view class="icon_box">

						<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
					</view>
				</view>
				<block v-if="PlaceType == '约教练'">
					<view class="group">
						<view class="lab">
							费用总额:
						</view>
						<view class="inp_box" @click="setReward">
							<input type="text" v-model="reqData.Commission" placeholder="奖金总额">
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view>
					</view>
				</block>
				<block v-if="PlaceType == '约陪滑'">
					<view class="group">
						<view class="lab">
							费用总额:
						</view>
						<view class="inp_box" @click="setReward">
							<input type="text" v-model="reqData.Commission" placeholder="奖金总额">
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view>
					</view>
				</block>
				<block v-if="PlaceType == '约拼车'">
					<view class="group" @click="chooseLocation">
						<view class="lab">出发地点</view>
						<view class="inp_box">
							<input :value="reqData.Start_Pot" type="text" disabled placeholder="请选择" />
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view>
					</view>
					<view class="group" @click="endLocation">
							<view class="lab">目标地点</view>
							<view class="inp_box">
								<input :value="reqData.End_Pot" type="text" disabled placeholder="请选择" />
							</view>
							<view class="icon_box">
								<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
							</view>
					</view>
					<view class="group" @click="showApportion = true">
						<view class="lab">
							买单方式:
						</view>
						<view class="inp_box">
							<input type="text" :value="reqData.FeeRule" disabled placeholder="请选择买单方式">
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view>
					</view>
				</block>
				<block v-if="PlaceType == '约组局'">
					<view class="group" >
						<view class="lab">
							人数:
						</view>
						<view class="inp_box">
							<input type="text" v-model="reqData.PeopleNum"  placeholder="请输入人数">
						</view>
						<!-- <view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view> -->
					</view>
					<view class="group" @click="showApportion = true">
						<view class="lab">
							买单方式:
						</view>
						<view class="inp_box">
							<input type="text" :value="reqData.FeeRule" disabled placeholder="请选择买单方式">
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view>
					</view>
				</block>
				<!-- <view class="tip f2 c2" v-if="shop.IsOpenMember == 1">
					提示：本场不能直接预订，可能需要会籍或人满，如果你有会籍可以先组局，再让客服预订
				</view> -->
				<view class="group" @click="showTime = true">
					<view class="lab">
						时间:
					</view>
					<view class="inp_box">
						<input :value="dateTime" type="text" disabled placeholder="请选择时间">
					</view>
					<view class="icon_box">
						<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
					</view>
				</view>

				<view class="group">
					<view class="lab">
						是否公开:
					</view>
					<view class="inp_box">
						<u-radio-group v-model="reqData.IsOpen">
							<u-radio activeColor="#333" name="0" shape="circle" labelColor="#333" label="公开"></u-radio>
							<u-radio activeColor="#333" name="1" shape="circle" labelColor="#333" label="不公开"></u-radio>
						</u-radio-group>
					</view>
				</view>

				<view class="group" v-if="reqData.FeeRule === '男A女免'">
					<view class="lab">
						女性人数:
					</view>
					<view class="inp_box">
						<input type="number" v-model="reqData.WomenNum" placeholder="请输入女性人数">
					</view>
				</view>

				<view class="group group_textarea">
					<u--textarea v-model="reqData.Remark" maxlength="200" border="bottom" count
						placeholder="有什么需要说明的,可以这里说明"></u--textarea>
				</view>
			</view>
			<!-- 时间选择 -->
			<u-datetime-picker :minDate="minDate" ref="datetimePicker" :show="showTime" mode="datetime"
				@cancel="showTime=false" @confirm="setTime" minMinute="0" maxMinute="30" :filter="timeFilter"></u-datetime-picker>
			<!-- 同组人数 -->
			<u-picker :show="showTeammate" immediateChange @confirm="setPeopleNum" @cancel="showTeammate=false"
				:columns="teammate"></u-picker>
			<!-- 分摊方式 -->
			<u-picker :show="showApportion" immediateChange @confirm="setFeeRule" @cancel="showApportion=false"
				:columns="apportion"></u-picker>



		</view>
		<view class="mt30 create_ball_btn">
			<view class="btn" @click="sub">确定修改</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				PlaceType:'',
				BallID: '',
				payPrice: 0,

				localList: [],
				// 时间
				minDate: (new Date().getTime()),
				showTime: false,
				// 分组
				teammate: [
					[
						1, 2, 3
					]
				],
				showTeammate: false,
				reward: {
					show: false
				},
				// 分摊
				apportion: [
					[
						'组局者承担',
						'AA制',
						'男A女免',
						'女A男免'
					]
				],
				showApportion: false,


				ShopName: "",

				reqData: {
					hasReward: true,
					reward: 0,
					ShopID: "",
					ServerDate: "",
					ServerTime: "",
					FeeRule: "组局者承担",
					PeopleNum: 1,
					IsOpen: "0",
					Title: "",
					WomenNum: "",
					City: "",
					Longitude: '',
					Latitude: '',
					Place: '',
					Commission: '',
					Remark: '',
					Start_Pot:'', // 出发地点
					End_Pot:'',  // 目标地点
				},
				shop: {},
				cj_commission: 0,
				old_commission: 0

			}
		},
		async onLoad(e) {
			console.log('ID============',e)
			this.BallID = e.id;
			this.PlaceType = e.PlaceType
			let ad = (await this.$api.post('Appointment/Detail', {
				ID: this.BallID,
				User_Lng: 0,
				User_Lat: 0
			}));
			if(ad.code == 0){
				this.reqData.ID = ad.data.ID;
				this.reqData.reward = ad.data.Commission / ad.data.PeopleNum;
				this.reqData.ServerDate = ad.data.ServerDate;
				this.reqData.ServerTime = ad.data.ServerTime;
				this.reqData.FeeRule = ad.data.FeeRule;
				this.reqData.PeopleNum = ad.data.PeopleNum;
				this.reqData.Commission = ad.data.Commission;
				this.old_commission = ad.data.Commission;
				this.reqData.Title = ad.data.Title;
				this.reqData.Remark = ad.data.Remark;
				this.reqData.IsOpen = ad.data.IsOpen;
				this.reqData.Place = ad.data.Place;
				this.reqData.ShopName = ad.data.ShopName;
				this.reqData.Longitude = ad.data.Longitude;
				this.reqData.Latitude = ad.data.Latitude;
				this.reqData.Start_Pot = ad.data.Start_Pot
				this.reqData.End_Pot = ad.data.End_Pot
				this.reqData.IsOpen = this.reqData.IsOpen.toString();
			}

			if (this.reqData.ShopID > 0) {
				this.ShopName = this.reqData.ShopName;
			} else {
				this.Place = this.reqData.Place;
				this.ShopName = this.reqData.Place;
			}

			let _this = this;
			uni.$on('site', async data => {
				console.log(data);
				_this.Place = data.ShopName;
				_this.ShopName = data.ShopName;
				_this.reqData.ShopID = data.ID;
				_this.reqData.RegisterFee = data.Price;
				_this.reqData.Longitude = data.Longitude;
				_this.reqData.Latitude = data.Latitude;

				_this.shop = data;
				let res = await _this.$util.getGeocoder(data.Address);

				this.reqData.City = res.result.address_components.city;
			})

			uni.$on('reward', async data => {
				_this.reqData.Commission = data * _this.reqData.PeopleNum

			})
			uni.$on('custom', async data => {
				console.log(data);
				this.Place = data.Place
				this.ShopName = data.Place
				this.reqData.ShopID = 0
				this.reqData.Place = data.Place
				this.reqData.Longitude = data.Longitude
				this.reqData.Latitude = data.Latitude
			})
		},
		onUnload() {
			uni.$off('site')
			uni.$off('reward')
			uni.$off('custom')
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			timeFilter(mode, options) {
				console.log(mode);
				let d = new Date()
				if (mode === 'hour') {
					console.log(d.getMinutes(),'ddd');
					let mi = d.getMinutes()
					console.log(options,'optionsoptionsoptions');
					if(mi>30)options.splice(0,1)
					return options
				}
				if (mode === 'minute') {
					console.log(options,'option');
					return ['00','30']
				}
				return options;
			},
			//选择地址
		openMap(item) {
			const _this = this
			 	uni.chooseLocation({
					async success(res) {
						console.log('res-------',res);
						let d = await _this.$util.getAddress({ longitude: res.longitude, latitude: res.latitude });
						console.log(d);
						_this.reqData.Longitude = res.longitude
						_this.reqData.Latitude = res.latitude
						_this.reqData.Place = res.name || d.result.address_reference.landmark_l2.title
						_this.ShopName = res.name || d.result.address_reference.landmark_l2.title
					}
				});
		},
		chooseLocation() {
				const _this = this
			 	uni.chooseLocation({
					async success(res) {
						// console.log('res-------',res);
						let d = await _this.$util.getAddress({ longitude: res.longitude, latitude: res.latitude });
						console.log(d);
						_this.reqData.Start_Lat = res.latitude
						_this.reqData.Start_Lng = res.longitude
						_this.reqData.Start_Pot = res.name || d.result.address_reference.landmark_l2.title
					}
				});
		},
		endLocation() {
				const _this = this
			 	uni.chooseLocation({
					async success(res) {
						// console.log('res-------',res);
						let d = await _this.$util.getAddress({ longitude: res.longitude, latitude: res.latitude });
						console.log(d);
						_this.reqData.End_Lat = res.latitude
						_this.reqData.End_Lng = res.longitude
						_this.reqData.End_Pot = res.name || d.result.address_reference.landmark_l2.title
					}
				});
				// nav_to('/pages/ball/ball_site?golfType=' + reqData.PlaceType)
		},
			// 有奖励

			setReward() {
				this.nav_to(`/pages/ball/ball_reward`)
			},

			async sub() {

				if (!this.reqData.Title) {
					this.$pv.msg('请填写主题');
					return false;
				}
				if (!this.reqData.ShopID && !this.ShopName) {
					this.$pv.msg('请选择场地');
					return false;
				}
				if (!this.reqData.ServerDate) {
					this.$pv.msg('请选择时间');
					return false;
				}
				if (!this.reqData.FeeRule) {
					this.$pv.msg('请选择买单方式');
					return false;
				}

				let money = this.cj_commission;


				if (this.cj_commission <= 0) {
					//退回奖励
					//退回多余的奖励
					money = 0 - money; //变成正的
					let pres = await this.$api.post('/SaleChannel/ReturnMoney', {
						Money: money
					});

					let res = await this.$api.post('Appointment/Edit', {
						ID: this.reqData.ID,
						ShopID: this.reqData.ShopID,
						ServerDate: this.reqData.ServerDate,
						ServerTime: this.reqData.ServerTime,
						FeeRule: this.reqData.FeeRule,
						PeopleNum: this.reqData.PeopleNum,
						IsOpen: this.reqData.IsOpen,
						Title: this.reqData.Title,
						WomenNum: this.reqData.WomenNum,
						City: this.reqData.City,
						Longitude: this.reqData.Longitude,
						Latitude: this.reqData.Latitude,
						Place:  this.reqData.Place,
						ShopName: this.ShopName,
						Commission: this.reqData.Commission,
						Start_Lat:this.reqData.Start_Lat,
						Start_Lng:this.reqData.Start_Lng,
						Start_Pot:this.reqData.Start_Pot,
						End_Pot:this.reqData.End_Pot,
						End_Lat:this.reqData.End_Lat,
						End_Lng:this.reqData.End_Lng,
					});

					this.nav_to('/pages/ball/ball_details?id=' + this.reqData.ID);
					return;


				} else {

					let _this = this;

					uni.showModal({
						title: '温馨提示',
						content: '您需要再支付￥' + money + '奖励',
						confirmText: "去支付",
						cancelText: '取 消',
						async success(res) {
							if (res.confirm) {
								//需要再支付
								let pres = await _this.$api.post('/Payment/PayV2', {
									EventID: _this.BallID,
									CompanyID: 6002,
									total_fee: money,
									body: '修改球局',
									EventType: '追加奖励',
									SourcePage:'ball_edit',
									// #ifdef MP-WEIXIN
									PayChannel: "weixin",
									// #endif
									// #ifdef APP
									PayChannel: "app"
									// #endif
								});

								if (pres.data == 0) {
									//已余额支付成功					

									let res = await _this.$api.post('Appointment/Edit', {
										ID: _this.reqData.ID,
										ShopID: _this.reqData.ShopID,
										ServerDate: _this.reqData.ServerDate,
										ServerTime: _this.reqData.ServerTime,
										FeeRule: _this.reqData.FeeRule,
										PeopleNum: _this.reqData.PeopleNum,
										IsOpen: _this.reqData.IsOpen,
										Title: _this.reqData.Title,
										WomenNum: _this.reqData.WomenNum,
										City: _this.reqData.City,
										Longitude: _this.reqData.Longitude,
										Latitude: _this.reqData.Latitude,
										Place: _this.reqData.Place,
										ShopName: _this.ShopName,
										Commission: _this.reqData.Commission,
										Start_Lat:this.reqData.Start_Lat,
										Start_Lng:this.reqData.Start_Lng,
										Start_Pot:this.reqData.Start_Pot,
										End_Pot:this.reqData.End_Pot,
										End_Lat:this.reqData.End_Lat,
										End_Lng:this.reqData.End_Lng,
									});

									_this.nav_to('/pages/ball/ball_details?id=' + _this.reqData.ID);
									return;
								} else {
									console.log(pres)

									let payObj = JSON.parse(pres.data);

									uni.requestPayment({
										provider: 'wxpay',
										// #ifdef APP
										orderInfo: payObj,
										// #endif
										// #ifdef MP-WEIXIN
										timeStamp: payObj.timeStamp,
										nonceStr: payObj.nonceStr,
										package: payObj.package,
										signType: payObj.signType,
										paySign: payObj.paySign,
										// #endif
										success: async (r) => {

											let res = await _this.$api.post(
												'Appointment/Edit', {
													ID: _this.reqData.ID,
													ShopID: _this.reqData.ShopID,
													ServerDate: _this.reqData.ServerDate,
													ServerTime: _this.reqData.ServerTime,
													FeeRule: _this.reqData.FeeRule,
													PeopleNum: _this.reqData.PeopleNum,
													IsOpen: _this.reqData.IsOpen,
													Title: _this.reqData.Title,
													WomenNum: _this.reqData.WomenNum,
													City: _this.reqData.City,
													Longitude: _this.reqData.Longitude,
													Latitude: _this.reqData.Latitude,
													Place:  _this.reqData.Place,
													ShopName: _this.ShopName,
													Commission: _this.reqData.Commission,
													Remark: _this.reqData.Remark,
													Start_Lat:this.reqData.Start_Lat,
													Start_Lng:this.reqData.Start_Lng,
													Start_Pot:this.reqData.Start_Pot,
													End_Pot:this.reqData.End_Pot,
													End_Lat:this.reqData.End_Lat,
													End_Lng:this.reqData.End_Lng,
												});

											_this.nav_to('/pages/ball/ball_details?id=' + _this.reqData.ID);
										},
										fail: (err) => {
											_this.$pv.msg('支付失败');
										}
									});
								}
							} else if (res.cancel) {
								_this.nav_to('/pages/ball/ball_details?id=' + _this.reqData.ID);
							}
						}
					});

				}

			},

			setFeeRule(e) {

				this.reqData.FeeRule = e.value[0];
				this.showApportion = false;
			},
			setPeopleNum(e) {

				this.reqData.PeopleNum = e.value[0];
				this.reqData.reward = this.toDecimal(this.reqData.Commission / this.reqData.PeopleNum)
				this.showTeammate = false;
			},
			setTime(e) {
				let em = uni.$u.timeFormat(e.value, 'hh:MM');
				let n =''
				let b = ''
				if(em.slice(3) > 30){
					let time = Number(e.value)+(3600*1000)
					n = uni.$u.timeFormat(time, 'yyyy-mm-dd');
					b = uni.$u.timeFormat(time, 'hh:MM');
				}else{
					n = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
					b = uni.$u.timeFormat(e.value, 'hh:MM');
				}
				if(b.slice(3) != 30){
					let hm = b.split('')
					hm.splice(3,1,'0')
					hm.splice(4,1,'0')
					console.log(hm,'b');
					b = hm.join('')
				}

				this.reqData.ServerDate = n;
				this.reqData.ServerTime = b;
				this.showTime = false;
			},
			formatter(type, value) {
				console.log(type, value)
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分  `
				}
				return value
			},
			toDecimal(x) {
				var f = parseFloat(x).toFixed(2)
				return f;
			}
		},
		computed: {
			total_reward() {

				//差额=当前选的金额 - 之前已支付
				// 20   = 1060-1040

				this.cj_commission = this.reqData.Commission - this.old_commission;


				return this.reqData.PeopleNum * this.reqData.reward
			},

			dateTime() {
				if (!this.reqData.ServerDate) {
					return "";
				} else {
					return this.reqData.ServerDate.split('T')[0] + " " + this.reqData.ServerTime;
				}
			},
			svgPrice() {
				let n = "";
				if (this.reqData.FeeRule === "男A女免") {
					if (this.reqData.PeopleNum <= this.reqData.WomenNum) {
						this.$pv.msg('女性人数要小于同组人数');
						this.reqData.WomenNum = this.reqData.PeopleNum > 0 ? this.reqData.PeopleNum - 1 : 0;
						this.payPrice = n;
					} else {
						n = this.reqData.RegisterFee / (this.reqData.PeopleNum - this.reqData.WomenNum);
						this.payPrice = n;
					}
				} else if (this.reqData.FeeRule === "AA制") {
					n = this.reqData.RegisterFee / this.reqData.PeopleNum;
					this.payPrice = n;
				} else if (this.reqData.FeeRule === "组局者承担") {
					n = 0;
					this.payPrice = this.reqData.RegisterFee;
				}
				return n;
			},

		},
		watch: {
			svgPrice(newVal) {
				this.reqData.Price = newVal;
			}
		}
	}
</script>

<style lang="scss">
	.pb100 {
		padding-bottom: 100rpx;
	}

	.ball_space {
		input {
			flex: 1;

		}

		.sele {
			margin-left: 16rpx;
			background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
			text-align: center;
			color: #4C310C;
			font-weight: bold;
			padding: 2rpx 10rpx;
			border-top: 100%;

			position: relative;

		}
	}

	.reward_content {
		padding: 20rpx 30rpx;

		.title {
			text-align: center;
			font-weight: 600;
			margin: 0rpx 0 40rpx 0;
		}

		.money_pay {
			text-align: right;
			margin-right: 110rpx;
		}

		.btn {
			margin: 30rpx 0 30rpx 0;
		}

		.c_btn {
			text-align: center;
			margin: 20rpx 0;
		}

		.group {
			border-bottom: 1px solid #e4e4e4;

			.lab {
				padding-right: 10rpx;
				color: black;
				font-size: 32rpx;
			}

			.inp_box {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: flex-end;

				>view {
					display: flex;
				}

				input {
					width: 90%
				}

				.total_reward {
					font-size: 28rpx;
					color: rgb(156, 156, 156);
					margin-top: 16rpx;
				}
			}

			.uni_icon {
				width: 40rpx;
				height: 40rpx;
			}
		}

		view {
			color: black;
		}
	}

	.title {
		padding: 20rpx 0 10rpx;
		margin-left: 30rpx;
		font-size: 36rpx;
		line-height: 60rpx;
	}

	.bg {
		margin-top: 20rpx;
		// background: #202020;
		border-radius: 16rpx;
		font-weight: bold;
	}

	.group {
		display: flex;
		align-items: center;
		height: 110rpx;
		border-bottom: 1px solid #e4e4e4;
		margin-left: 30rpx;
		margin-right: 30rpx;

		&:last-child {
			border-bottom: none;
		}

		.lab {
			padding-right: 10rpx;
			color: black;
			font-size: 32rpx;
		}

		.inp_box {
			flex: 1;

			input {
				width: 100%;
				text-align: right;
			}
		}

		.icon_box {
			height: 40rpx;
			width: 40rpx;
			line-height: 40rpx;
		}
	}

	.group2 {
		.lab {
			color: #FEF0BC;
		}

		.inp_box {
			input {
				color: #FEF0BC;
			}

			.input-placeholder {
				// color: #FEF0BC;
				color: rgba(254, 240, 188, 0.6);
			}
		}
	}

	.group_textarea {
		height: 200rpx;

		/deep/ .u-textarea {
			background: none !important;
			padding-left: 0 !important;
			padding-right: 0 !important;
			border-bottom: none !important;
		}

		/deep/ .u-textarea__count {
			background: none !important;
			color: #fff !important;
		}

		/deep/ .u-textarea__field {
			// color: #fff !important;
		}
	}

	.mt30 {
		margin-top: 30rpx;
	}

	/deep/ .u-radio-group--row {
		justify-content: flex-end;
	}

	/deep/ .u-radio {
		margin-right: 20rpx;
		height: 80rpx;
	}

	.tip {
		margin-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		color: #DCC188;
	}

	.create_ball_btn {
		position: absolute;
		width: 100%;
		display: flex;
		justify-content: center;
		bottom: 58rpx;

		.btn {
			width: 84%;
		}
	}
</style>